<!-- 今日值班 -->
<template>
  <div class="rota-list">
    <div id="night">
      <h2>晚上：</h2>
      <div class="night-box" v-if="newData2">
        <div><span>总值班长：</span>{{newData2.dutyLeaderNames}}</div>
        <div><span>副总值班长：</span>{{newData2.dutyOfficePeopleName}}</div>
        <div><span>值班长：</span>{{newData2.dutyDayPeopleName}}</div>
        <div><span>值班员：</span>{{newData2.dutyNightPeopleNames}}</div>
      </div>
      <div class="nocourse" v-else>
        <p>没有值班信息</p>
      </div>
    </div>
    <div id="day">
      <h2>白天：</h2>
      <div class="day-box" v-if="newData">
        <div><span>总值班长：</span>{{newData.dutyLeaderNames}}</div>
        <div><span>副总值班长：</span>{{newData.dutyOfficePeopleName}}</div>
        <div><span>值班长：</span>{{newData.dutyDayPeopleName}}</div>
        <div><span>值班员：</span>{{newData.dutyNightPeopleNames}}</div>
      </div>
      <div class="nocourse" v-else>
        <p>没有值班信息</p>
      </div>
    </div>
  </div>
</template>
<script>
import verify from '@/assets/js/verificationMixin'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'TodayRota',
  mixins: [verify],
  data() {
    return {
      // phone:this.$route.query.phone,
      phone:'18153268671',
      newData: {},
      newData2: null,
    }
  },
  computed: {
    ...mapState(['userPhone']),
  },
  methods: {
    ...mapMutations([
      'toApp'
    ]),
    //获取新闻列表
    getNewList() {
      let _self = this;
      let userPhone = window.localStorage.getItem('loginTel');
      let uri = 'integrateAjax/sysDuty!querySysDutyList.action'
      _self.$_get(uri, {
        'userPhone'    :_self.phone,
      })
        .then(function(res) {
          let data = res.gridModel;
          console.log(data)
          if (data.length > 0) {
            if (data.length == 1) {
              for (var i in data) {
                if (data[i].isDayTime == '夜间') {
                  _self.newData2 = data[i];
                  _self.newData = null;
                } else if (data[i].isDayTime == '白天') {
                  _self.newData = data[i];
                  _self.newData2 = null;
                }
              }
            } else {
              for (var i in data) {
                if (data[i].isDayTime == '夜间') {
                  _self.newData2 = data[i];
                } else {
                  _self.newData = data[i];
                }
              }
            }
          } else {
            _self.newData2 = null;
            _self.newData = null;
          }
        })
    },

  },
  mounted() {
    this.getNewList();
    this.$_verifyConfig();
    dd.ready(function(){
        dd.biz.navigation.setTitle({
            title: '今日值班',//标题
            onSuccess : function(result) {},
            onFail : function() {}
        });
    }) 
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.rota-list {
  height: 100%;
  overflow-y: auto;
  background: #f4f4f4;
  padding-bottom: 80px;
  padding: 20px 20px;

  #day {
    h2 {
      text-align: left;
      font-size:68px; /* px */
      font-weight:500;
      color:#2d5f96;
    }
    .day-box {
      padding: 20px 0;

      >div {
        text-align: left;
        line-height: 60px;
        font-size: 32px;

        >span {
          display: inline-block;
          width: 200px;
          text-align: right;
        }
      }
    }

  }

  #night {
    h2 {
      text-align: left;
      font-size:68px; /* px */
      font-weight:500;
      color:#2d5f96;
    }

    .night-box {
      padding: 20px 0;

      >div {
        text-align: left;
        line-height: 60px;
        font-size: 32px;
            
        >span {
          display: inline-block;
          width: 200px;
          text-align: right;
        }
      }
    }
  }

  .nocourse {
    min-height:400px;
    margin-top: 20px;
    .iconfont {
      font-size: 180px;
      color: #999;
    }

    p {
      color: #999;
      font-size: 40px; /* px */
      line-height: 120px;
      color:#ddd;
      text-align: left;
      padding-left:110px;
    }
  }
}

</style>
